<template>
	<view class="payment">
		<!-- <image src="../../static/computingPower/about.png" mode=""></image> -->
		<!-- 二维码 -->
		<canvas class="f__canvas"  canvas-id="qrcode"  id="qrcode"></canvas>
		<view class="money">
			<view class="mAddress">{{$t('sign.sign-payment.address')}}:</view>
			<view class="address"><text>0x09217abb111afbfb150dec7a9c17aa4792</text></view>
		</view>
		<!-- 内容详情 -->
		<ul>
			<li>请勿向上述地址充值任何非 ERC20 USDT 资产，
否则资产将不可找回。
	</li>
			<li>使用USDT-ERC20地址充值需要12个网络确认
才能到账</li>
		</ul>
		<!-- 按钮 -->
		<view class="btns">
			<button>{{$t('sign.sign-payment.savaCode')}}</button>
			<button>{{$t('sign.sign-payment.copyAddress')}}</button>
		</view>
		<button type="default" class="pay" @click="goPay">{{$t('sign.sign-payment.paid')}}</button>
	</view>
</template>

<script>
	import _canvas from '@/uni_modules/fan-canvas/canvasUtils';
	import { saveImg,qrcodeCanvas } from '@/uni_modules/fan-canvas/plugins/utils';// 需要保存图片和生成二维码可以引用此文件
	export default {
		data() {
			return {
				info:'',
				qrcodeImg:'',    //二维码本地图片
			}
		},
		methods: {
			goPay(){
				uni.redirectTo({
					url:'../shebei/shebei'
				})
			},
			// 创建二维码
			createQrcode(){
				
			    var that = this
			    qrcodeCanvas('qrcode', 'https://www.huya.com', 300,300);
			    const ctx = uni.createCanvasContext('qrcode');
			    ctx.draw(true, function() {
			        uni.canvasToTempFilePath({
			            canvasId: 'qrcode',
						height:400,
						width:400,
			            success(res) {
			                // 二维码本地图
			                that.qrcodeImg = res.tempFilePath
			                console.log(res,'createQrcode')
			            }
			        },that)
			    })
			}
		},
		onLoad(res) {
			this.info=res.list
			console.log(res);
		},
		onReady() {
		    this.createQrcode()
		},
	}
</script>
<style>
	page{
		background-color: #F3F3F3;
	}
</style>
<style scoped>
.payment{
	position: relative;
}
image{
	width: 300rpx;
	height: 300rpx;
	/* position: absolute;
	left: 240rpx;
	top: 200rpx; */
}
.money{
	width: 80%;
	margin: 200rpx auto 0;
}
.mAddress{
	font-size: 1.1em;
	color: #6A6A6A ;
}
.address{
	width: 580rpx;
	font-weight: bold;
	font-size: 1.1em;
	word-wrap: break-word;
	word-break: break-all;
}
ul{
	color: #6A6A6A;
	font-size: .9em;
	}
	li{
		margin: 20rpx 0;
	}
.btns{
	margin: 200rpx auto 0;
	display: flex;
	width: 90%;
	justify-content: space-evenly;
}

.btns>button{
	width: 280rpx;
	border: 2rpx solid #207DFE;
	box-shadow: 0px 10rpx 40rpx rgba(216, 216, 216, 0.17);
	font-size: 1em;
}
.pay{
	margin: 80rpx auto 0;
	width: 90%;
	background-color: #207DFE;
	color: #FFFFFF;
	}
	.f__canvas{
		position: relative;
		left: 200rpx;
		top: 180rpx;
		width: 260rpx !important;
	}
</style>
